<template>
	 <HeaderNav active-index="3"></HeaderNav>
	 <TaskContainer>
		 <div class="toolbar">
			  <el-button type="primary" @click="handleAdd">添加人员组
				<template #icon>
					<el-icon><CirclePlus /></el-icon>
				</template>
			  </el-button>
			  <el-button type="danger" @click="batchRemove">批量删除
					<template #icon>
						<el-icon><Delete /></el-icon>
					</template>
			  </el-button>
		 </div>
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column type="selection" width="55" />
		     <el-table-column prop="id" label="序号" />
		     <el-table-column prop="name" label="组名"/>
<!--			 <el-table-column prop="num" label="人数"/>-->
		     <el-table-column prop="create_time" label="录入时间">
			   <template #default="scope">
				 <div style="display: flex; align-items: center">
				   <el-icon><timer /></el-icon>
				   <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
				 </div>
			   </template>
			</el-table-column>
		     <el-table-column fixed="right" label="操作" width="310">
		       <template #default="scope">
				 <el-button type="info" size="small" @click="handleApply(scope.$index, scope.row)">分配人员</el-button>
				 <el-button type="warning" size="small" @click="handleTask(scope.$index, scope.row)">分配任务</el-button>
		         <el-button  size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		         <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		       </template>
		     </el-table-column>
		</el-table>
	 </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
export default {
	components: {
		HeaderNav,
		TaskContainer,
		Condition,
	},
	data() {
		return {
      pagination:{
        page:1,
        rows:20,
      },
			list: [
			]
		}
	},
  created() {
    window.$bus.on('close-win-refresh', (index) => {
		  // 关闭弹出的窗口
		  layer.close(index);
      this.GroupList();
    });

    window.$bus.on('close-win',(index) => {
      layer.close(index);
      this.GroupList();
    });
    window.$bus.on('close-group',(index) => {
      layer.close(index);
    });
    this.GroupList();
  },
  methods: {
    GroupList(){
      this.$api.GroupList(this.pagination).then(ret => {
        this.list = ret.results;
      })
    },
		handleAdd(event) {
			this.$layer.open({
				type: 2,
				title: '添加人员组',
				shadeClose: true,
				shade: 0.5,
				area: ['480px', '200px'],
				btn: ['保存', '关闭'] ,
				content: '/group/add',
				yes: (index, layero) => {
					let iframeWin = window[layero.find('iframe')[0]['name']];
					iframeWin.$bus.emit('add-group', index);
				}
			})
		},
    handleEdit(i, row){
      //编辑小组
      this.$layer.open({
        type: 2,
        title: '编辑小组',
        shadeClose: true,
        shade: 0.5,
        area: ['650px', '360px'],
        btn: ['保存', '关闭'],
        content: '/group/update?id='+row.id,
        yes: (index, layero) => {
          // 获取 打开的 弹出层 窗口对象
          let iframeWin = window[layero.find('iframe')[0]['name']];
          // 向 mitt 消息总线 发送 update-clazz 事件, 并传入 index 索引
          // 在 弹出的 clazz/update 页面中 监听 update-clazz、并完成 班级的修改功能
          iframeWin.$bus.emit('update-group', index);
          //111
        }
      })
    },
    handleDelete(i,row){
      // 删除小组
      let id = row.id
      this.$api.deleteGroup(id).then(ret => {
			this.GroupList();
			this.$layer.msg("成功了！！")
			return ;
		})
    },
		batchRemove(event) {
			let rows = this.$refs.tb.getSelectionRows();
      //获取要删除的班级ID列表
      let group_id = rows.map(obj => obj.id);
      if (group_id.length === 0){
        this.$layer.msg('请至少选中一个要删除的小组')
        return ;
      }

      this.$layer.confirm('确定要删除选中的小组？',{icon:3,title:'提示'},index => {
          //调用批量删除班级接口、完成删除
          this.$api.batchRemoveGroup(group_id).then(ret => {
          //如果删除成功、则刷新页面
          this.GroupList();
          layer.close(index)
        })
      })
		},
		handleApply(index, row) {
        // const idsString = JSON.stringify(row.id); // 假设 row 是一个数组或对象，需要转换为字符串
			  this.$layer.open({
				type: 2,
				title: '分配人员 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['580px', '780px'],
				btn: ['保存', '关闭'] ,
				content: `/group/apply?id=${encodeURIComponent(row.id)}`,
				yes: (index, layero) => {
					let iframeWin = window[layero.find('iframe')[0]['name']];
          iframeWin.$bus.emit('apply-task', index);
          // this.GroupList();
          // layer.close(index);
				}
			})
		},
		handleTask(index, row) {
			this.$layer.open({
				type: 2,
				title: '分配任务 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['1300px', '820px'],
				btn: ['保存', '关闭'] ,
				content: '/group/task-list?id='+row.id,
				yes: (index, layero) => {
				    // 获取 打开的 弹出层 窗口对象
            let iframeWin = window[layero.find('iframe')[0]['name']];
            // 向 mitt 消息总线 发送 update-clazz 事件, 并传入 index 索引
            // 在 弹出的 clazz/update 页面中 监听 update-clazz、并完成 班级的修改功能
            iframeWin.$bus.emit('assign-task', index);
				}
			})
		}
	}
}
</script>

<style scoped>
.table-modules {
	padding: 10px 20px;
}
.table-modules span {
	padding: 2px 10px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.toolbar {
	position: relative;
	right: 10px;
	z-index: 200;
	text-align: right;
	margin: 20px;
	flex: 1 1 auto;
}
</style>